﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Patronum</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Le styles -->

    <script type="text/javascript" src="assets/js/jquery.js"></script>
    <script type="text/javascript" src="assets/js/echarts.js"></script>

    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/loader-style.css">
    <link rel="stylesheet" href="assets/css/bootstrap.css">

    <link rel="stylesheet" type="text/css" href="assets/js/progress-bar/number-pb.css">

    <!--copy this code into your header-->
    <link href="assets/css/goal-thermometer.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="assets/js/goal-thermometer.js"></script>


    <style type="text/css">
    canvas#canvas4 {
        position: relative;
        top: 20px;
    }
    </style>




    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="assets/ico/minus.png">
</head>

<body>
    <!-- Preloader -->
    <div id="preloader">
        <div id="status">&nbsp;</div>
    </div>
    <!-- TOP NAVBAR -->
    <nav role="navigation" class="navbar navbar-static-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle" type="button">
                    <span class="entypo-menu"></span>
                </button>
                <button class="navbar-toggle toggle-menu-mobile toggle-left" type="button">
                    <span class="entypo-list-add"></span>
                </button>




                <div id="logo-mobile" class="visible-xs">
                   <h1>WEB管理<span>v1.2</span></h1>
                </div>

            </div>


            <!-- Collect the nav links, forms, and other content for toggling -->
            <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">


                </ul>
                <div id="nt-title-container" class="navbar-left running-text visible-lg">
                    <ul class="date-top">
                        <li class="entypo-calendar" style="margin-right:5px"></li>
                        <li id="Date"></li>


                    </ul>

                    <ul id="digital-clock" class="digital">
                        <li class="entypo-clock" style="margin-right:5px"></li>
                        <li class="hour"></li>
                        <li>:</li>
                        <li class="min"></li>
                        <li>:</li>
                        <li class="sec"></li>
                        <li class="meridiem"></li>
                    </ul>
                </div>

                <ul style="margin-right:0;" class="nav navbar-nav navbar-right">
                    <li>
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="icon-gear"></span>&#160;&#160;Setting</a>
                        <ul role="menu" class="dropdown-setting dropdown-menu">

                            <li class="theme-bg">
                                <div id="button-bg"></div>
                                <div id="button-bg2"></div>
                                <div id="button-bg3"></div>
                                <div id="button-bg5"></div>
                                <div id="button-bg6"></div>
                                <div id="button-bg7"></div>
                                <div id="button-bg8"></div>
                                <div id="button-bg9"></div>
                                <div id="button-bg10"></div>
                                <div id="button-bg11"></div>
                                <div id="button-bg12"></div>
                                <div id="button-bg13"></div>
                            </li>
                        </ul>
                    </li>
                    <li class="hidden-xs">
                        <a class="toggle-left" href="#">
                            <span style="font-size:20px;" class="entypo-list-add"></span>
                        </a>
                    </li>
                </ul>

            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

    <!-- /END OF TOP NAVBAR -->

    <!-- SIDE MENU -->
    <div id="skin-select">
        <div id="logo">
            <h1>Patronum</h1>
        </div>

        <a id="toggle">
            <span class="entypo-menu"></span>
        </a>



        <div class="skin-part">
            <div id="tree-wrap">
                <div class="side-bar">
                    <ul class="topnav menu-left-nest">
                        <li>
                            <a href="#" style="border-left:0px solid!important;" class="title-menu-left">

                                <span class="widget-menu"></span>
                                <i data-toggle="tooltip" class="entypo-cog pull-right config-wrap"></i>

                            </a>
                        </li>
                        <li>
                            <a class="tooltip-tip ajax-load" href="index.html" title="Media">
                                <i class="icon-camera" style="font-size: 17px!important;"></i>
                                <span>服务器物理信息</span>

                            </a>
                        </li>

                        <li>
                            <a class="tooltip-tip ajax-load" href="opm.html" title="Blog App">
                                <i class="icon-document-edit"></i>
                                <span>优化报告</span>

                            </a>
                        </li>

                        <li>
                            <a class="tooltip-tip ajax-load" href="map.html" title="Social">
                                <i class="icon-feed" style="font-size: 17px!important;"></i>
                                <span>攻击事件回溯</span>

                            </a>
                        </li>

                    </ul>

                    <ul class="topnav menu-left-nest">
                        <li>
                            <a href="#" style="border-left:0px solid!important;" class="title-menu-left">

                                <span class="design-kit"></span>
                                <i data-toggle="tooltip" class="entypo-cog pull-right config-wrap"></i>

                            </a>
                        </li>

                        <li>
                            <a class="tooltip-tip ajax-load" href="index.html" title="Dashboard">
                                <i class="icon-window" style="font-size: 17px!important;"></i>
                                <span>About us</span>

                            </a>
                        </li>
                        <!--
                        <li>
                            <a class="tooltip-tip ajax-load" href="mail.html" title="Mail">
                                <i class="icon-mail"></i>
                                <span>mail</span>
                                <div class="noft-blue">289</div>
                            </a>
                        </li>

                        <li>
                            <a class="tooltip-tip ajax-load" href="icon.html" title="Icons">
                                <i class="icon-preview"></i>
                                <span>Icons</span>
                                <div class="noft-blue" style="display: inline-block; float: none;">New</div>
                            </a>
                        </li>

                        <li>
                            <a class="tooltip-tip" href="#" title="Extra Pages">
                                <i class="icon-document-new"></i>
                                <span>About us</span>
                            </a>
                            <ul>
                                <li>
                                    <a class="tooltip-tip2 ajax-load" href="blank_page.html" title="Blank Page"><i class="icon-media-record"></i><span>Blank Page</span></a>
                                </li>
                                 <li>
                                    <a class="tooltip-tip2 ajax-load" href="profile.html" title="Profile Page"><i class="icon-user"></i><span>Profile Page</span></a>
                                </li>
                                <li>
                                    <a class="tooltip-tip2 ajax-load" href="invoice.html" title="Invoice"><i class="entypo-newspaper"></i><span>Invoice</span></a>
                                </li>
                                <li>
                                    <a class="tooltip-tip2 ajax-load" href="pricing_table.html" title="Pricing Table"><i class="fontawesome-money"></i><span>Pricing Table</span></a>
                                </li>
                                <li>
                                    <a class="tooltip-tip2 ajax-load" href="time-line.html" title="Time Line"><i class="entypo-clock"></i><span>Time Line</span></a>
                                </li>
                                <li>
                                    <a class="tooltip-tip2" href="404.html" title="404 Error Page"><i class="icon-thumbs-down"></i><span>404 Error Page</span></a>
                                </li>
                                <li>
                                    <a class="tooltip-tip2" href="500.html" title="500 Error Page"><i class="icon-thumbs-down"></i><span>500 Error Page</span></a>
                                </li>
                                <li>
                                    <a class="tooltip-tip2" href="lock-screen.html" title="Lock Screen"><i class="icon-lock"></i><span>Lock Screen</span></a>
                                </li>
                            </ul>
                        </li>
    -->
                        <li>
                            <a class="tooltip-tip " href="login.html" title="login">
                                <i class="icon-download " style="font-size: 17px!important;"></i>
                                <span>切换服务器</span>
                            </a>
                        </li>

                    </ul>

                    <ul id="menu-showhide" class="topnav menu-left-nest">
                        <li>
                            <a href="#" style="border-left:0px solid!important;" class="title-menu-left">

                                <span class="component"></span>
                                <i data-toggle="tooltip" class="entypo-cog pull-right config-wrap"></i>

                            </a>
                        </li>


                        <li>
                            <a class="tooltip-tip" href="#" title="UI Element">
                                <i class="icon-monitor"></i>
                                <span>退出登录</span>
                            </a>
                            <!--
                           <ul>
                               <li>
                                   <a class="tooltip-tip2 ajax-load" href="element.html" title="Element"><i class="icon-attachment"></i><span>Element</span></a>
                               </li>
                               <li><a class="tooltip-tip2 ajax-load" href="button.html" title="Button"><i class="icon-view-list-large"></i><span>Button</span> <div class="noft-blue-number">10</div></a>
                               </li>
                               <li>
                                   <a class="tooltip-tip2 ajax-load" href="wizard.html" title="Tab & Accordion"><i class="icon-folder"></i><span>Wizard</span><div class="noft-purple-number">3</div></a>
                               </li>
                               <li>
                                   <a class="tooltip-tip2 ajax-load" href="calendar.html" title="Calender"><i class="icon-calendar"></i><span>Calendar</span></a>
                               </li>
                               <li>
                                   <a class="tooltip-tip2 ajax-load" href="tree.html" title="Tree View"><i class="icon-view-list"></i><span>Tree View</span></a>
                               </li>
                               <li>
                                   <a class="tooltip-tip2 ajax-load" href="grids.html" title="Grids"><i class="icon-menu"></i><span>Grids</span></a>
                               </li>
                               <li>
                                   <a class="tooltip-tip2 ajax-load" href="chart.html" title="Chart"><i class="icon-graph-pie"></i><span>Chart</span></a>
                               </li>
                               <li>
                                   <a class="tooltip-tip ajax-load" href="typhography.html" title="Typhoghrapy">
                                       <i class="icon-information"></i>
                                       <span>Typhoghrapy</span>
                                   </a>
                               </li>
                           </ul>
                           -->
                        </li>
                        <li>
                            <a class="tooltip-tip" href="#" title="Form">
                                <i class="icon-document"></i>
                                <span>更改密码</span>
                            </a>
                            <!--
                           <ul>
                               <li>
                                   <a class="tooltip-tip2 ajax-load" href="form-element.html" title="Form Elements"><i class="icon-document-edit"></i><span>Form Elements</span></a>
                               </li>
                               <li>
                                   <a class="tooltip-tip2 ajax-load" href="andvance-form.html" title="Andvance Form"><i class="icon-map"></i><span>Andvance Form</span></a>
                               </li>
                               <li>
                                   <a class="tooltip-tip2 ajax-load" href="text-editor.html" title="Text Editor"><i class="icon-code"></i><span>Text Editor</span></a>
                               </li>
                               <li>
                                   <a class="tooltip-tip2 ajax-load" href="file-upload.html" title="File Upload"><i class="icon-upload"></i><span>File Upload</span></a>
                               </li>
                           </ul>
                           -->
                        </li>
                        <li>
                            <a class="tooltip-tip" href="#" title="Tables">
                                <i class="icon-view-thumb"></i>
                                <span>绑定服务器</span>
                            </a>
                            <!--
                           <ul>
                               <li>
                                   <a class="tooltip-tip2 ajax-load" href="table-static.html" title="Table Static"><i class="entypo-layout"></i><span>Table Static</span></a>
                               </li>
                               <li>
                                   <a class="tooltip-tip2 ajax-load" href="table-dynamic.html" title="Table Dynamic"><i class="entypo-menu"></i><span>Table Dynamic</span></a>
                               </li>
                           </ul>
                           -->
                        </li>

                        <li>
                            <a class="tooltip-tip ajax-load" href="map.html" title="Map">
                                <i class="icon-location"></i>
                                <span>服务期定位</span>

                            </a>
                        </li>
                    </ul>

                    <!--
                                                        <div class="side-dash">
                                                            <h3>
                                                                <span>Device</span>
                                                            </h3>
                                                            <ul class="side-dashh-list">
                                                                <li>Avg. Traffic
                                                                    <span>25k<i style="color:#44BBC1;" class="fa fa-arrow-circle-up"></i>
                                                                    </span>
                                                                </li>
                                                                <li>Visitors
                                                                    <span>80%<i style="color:#AB6DB0;" class="fa fa-arrow-circle-down"></i>
                                                                    </span>
                                                                </li>
                                                                <li>Convertion Rate
                                                                    <span>13m<i style="color:#19A1F9;" class="fa fa-arrow-circle-up"></i>
                                                                    </span>
                                                                </li>
                                                            </ul>
                                                            <h3>
                                                                <span>Traffic</span>
                                                            </h3>
                                                            <ul class="side-bar-list">
                                                                <li>Avg. Traffic
                                                                    <div class="linebar">5,7,8,9,3,5,3,8,5</div>
                                                                </li>
                                                                <li>Visitors
                                                                    <div class="linebar2">9,7,8,9,5,9,6,8,7</div>
                                                                </li>
                                                                <li>Convertion Rate
                                                                    <div class="linebar3">5,7,8,9,3,5,3,8,5</div>
                                                                </li>
                                                            </ul>
                                                            <h3>
                                                                <span>Visitors</span>
                                                            </h3>
                                                            <div id="g1" style="height:180px" class="gauge"></div>
                                                        </div>
                                                        -->
                </div>
            </div>
        </div>
    </div>
    <!-- END OF SIDE MENU -->



    <!--  PAPER WRAP -->
    <div class="wrap-fluid">
        <div class="container-fluid paper-wrap bevel tlbr">





            <!-- CONTENT -->
            <!--TITLE -->
            <div class="row">
                <div id="paper-top">
                    <div class="col-lg-3">
                        <h2 class="tittle-content-header">
                            <i class="icon-window"></i> 
                            <span>Dashboard
                            </span>
                        </h2>

                    </div>

                    <div class="col-lg-7">
                        <div class="devider-vertical visible-lg"></div>
                        <div class="tittle-middle-header">


                        </div>

                    </div>
                    <div class="col-lg-2">
                        <div class="devider-vertical visible-lg"></div>
                        <div class="btn-group btn-wigdet pull-right visible-lg">
                            <div class="btn">
                                Widget</div>
                            <button data-toggle="dropdown" class="btn dropdown-toggle" type="button">
                                <span class="caret"></span>
                                <span class="sr-only">Toggle Dropdown</span>
                            </button>
                            <ul role="menu" class="dropdown-menu">
                                <li>
                                    <a href="#">
                                        <span class="entypo-plus-circled margin-iconic"></span>Add New</a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="entypo-heart margin-iconic"></span>Favorite</a>
                                </li>
                                <li>
                                    <a href="#">
                                        <span class="entypo-cog margin-iconic"></span>Setting</a>
                                </li>
                            </ul>
                        </div>


                    </div>
                </div>
            </div>
            <!--/ TITLE -->

            <!-- BREADCRUMB -->
            <ul id="breadcrumb">
                <li>
                    <span class="entypo-home"></span>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="#" title="Sample page 1">Home</a>
                </li>
                <li><i class="fa fa-lg fa-angle-right"></i>
                </li>
                <li><a href="#" title="Sample page 1">Dashboard</a>
                </li>
                <li class="pull-right">
                    <div class="input-group input-widget">

                        <input style="border-radius:15px" type="text" placeholder="Search..." class="form-control">
                    </div>
                </li>
            </ul>

            <!-- END OF BREADCRUMB -->






            <div id="paper-middle">
                <div id="mapContainer"></div>
            </div>

            <!--  DEVICE MANAGER -->
            <div class="content-wrap">
                <div class="row">

                    <div class="col-lg-3">
                        <div class="revenue" id="revenueClose1">
                            <div id="main1" style="width: 280px;height:280px;position: relative;text-align: center"></div>

                            <script type="text/javascript">
                                // 基于准备好的dom，初始化echarts实例
                                var myChart1 = echarts.init(document.getElementById('main1'));

                                option1 = {
                                    title : {
                                        text: 'CPU',
                                        x:'center'
                                    },
                                    tooltip : {
                                        formatter: "{a} <br/>{b}  {c}"
                                    },
                                    toolbox: {
                                        feature: {
                                        }
                                    },
                                    series: [
                                        {
                                            name: 'CPU使用比率',
                                            type: 'gauge',
                                            radius : '80%',
                                            detail: {formatter:'{value}%'},
                                            data: [{value: 50}]
                                        }
                                    ]
                                };

                                setInterval(function () {
                                    option1.series[0].data[0].value = 18.23;
                                    myChart1.setOption(option1, true);
                                },2000);
                                // 使用刚指定的配置项和数据显示图表。
                                myChart1.setOption(option1);
                            </script>
                        </div>
                    </div>

                    <div class="col-lg-3">
                        <div class="revenue" id="revenueClose">
                            <div id="main2" style="width: 280px;height:280px;position: relative;text-align: center"></div>

                            <script type="text/javascript">
                                // 基于准备好的dom，初始化echarts实例
                                var myChart2 = echarts.init(document.getElementById('main2'));

                                option2 = {
                                    title : {
                                        text: 'Memory',
                                        x:'center'
                                    },
                                    tooltip : {
                                        formatter: "{a} <br/>{b}  {c}"
                                    },
                                    toolbox: {
                                        feature: {
                                        }
                                    },
                                    series: [
                                        {
                                            name: 'CPU使用比率',
                                            type: 'gauge',
                                            radius : '80%',
                                            detail: {formatter:'{value}%'},
                                            data: [{value: 50}]
                                        }
                                    ]
                                };

                                setInterval(function () {
                                    option2.series[0].data[0].value =12.15 ;
                                    myChart2.setOption(option2, true);
                                },2000);
                                // 使用刚指定的配置项和数据显示图表。
                                myChart2.setOption(option2);
                            </script>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="order" id="orderClose">
                            <div id="main3" style="width: 280px;height:280px;position: relative;text-align: center"></div>

                            <script type="text/javascript">
                                // 基于准备好的dom，初始化echarts实例
                                var myChart3 = echarts.init(document.getElementById('main3'));

                                option3 = {
                                    title : {
                                        text: 'Swap',
                                        x:'center'
                                    },
                                    tooltip : {
                                        formatter: "{a} <br/>{b}  {c}"
                                    },
                                    toolbox: {
                                        feature: {
                                        }
                                    },
                                    series: [
                                        {
                                            name: 'CPU使用比率',
                                            type: 'gauge',
                                            radius : '80%',
                                            detail: {formatter:'{value}%'},
                                            data: [{value: 50}],
                                        }
                                    ]
                                };

                                setInterval(function () {
                                    option3.series[0].data[0].value =4.78;
                                    myChart3.setOption(option3, true);
                                },2000);
                                // 使用刚指定的配置项和数据显示图表。
                                myChart3.setOption(option3);
                            </script>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class=" member" id="memberClose">
                            <div id="main4" style="width: 280px;height:280px;position: relative;text-align: center"></div>

                            <script type="text/javascript">
                                // 基于准备好的dom，初始化echarts实例
                                var myChart4 = echarts.init(document.getElementById('main4'));

                                option4 = {
                                    title : {
                                        text: 'Disk',
                                        x:'center'
                                    },
                                    tooltip : {
                                        formatter: "{a} <br/>{b}  {c}"
                                    },
                                    toolbox: {
                                        feature: {
                                        }
                                    },
                                    series: [
                                        {
                                            name: 'CPU使用比率',
                                            type: 'gauge',
                                            radius : '80%',
                                            detail: {formatter:'{value}%'},
                                            data: [{value: 50}],
                                            max:100,
                                        }
                                    ]
                                };

                                setInterval(function () {
                                    option4.series[0].data[0].value =62.14;
                                    myChart4.setOption(option4, true);
                                },2000);
                                // 使用刚指定的配置项和数据显示图表。
                                myChart4.setOption(option4);
                            </script>
                </div>
            </div>
            <!--  / DEVICE MANAGER -->










            <div class="content-wrap">
                <div class="row">
                    <div class="col-lg-8">
                        <div id="siteClose1" class="nest">
                            <div class="title-alt">
                                <h6>
                                    <span class="fontawesome-truck"></span>&nbsp;information</h6>
                                <div class="titleClose">
                                    <a class="gone" href="#siteClose1">
                                        <span class="entypo-cancel"></span>
                                    </a>
                                </div>
                                <div class="titleToggle">
                                    <a class="nav-toggle-alt" href="#site1">
                                        <span class="entypo-up-open"></span>
                                    </a>
                                </div>
                            </div>
                            <div id="site1" class="body-nest" style="min-height:296px;">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th></th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td class="armada-devider"> <h4><li class="icon icon-home" title="home"> HostName:</h4></td></li>
                                                <td class="armada-devider2"><h4>ubuntu-512mb-sfo2-01</h4></td>
                                            </tr>
                                            <tr>
                                                <td class="armada-devider"><h4><li class="icon icon-attachment" title="attachment"> CPU model Name:</h4></td></li>
                                                <td class="armada-devider2"><h4>Intel(R) Xeon(R) CPU E3-1220L @ 3.10GHz</h4></td>
                                            </tr>
                                            <tr>
                                                <td class="armada-devider"><h4><li class="icon icon-monitor" title="monitor"> IP:</h4></td></li>
                                                <td class="armada-devider2"><h4>138.68.51.71</h4></td>
                                            </tr>
                                            <tr>
                                                <td class="armada-devider"><h4><li class="entypo-calendar" title="calendar"> Last update:</h4></td></li>
                                                <td class="armada-devider2"><h4>5 minutes ago</h4></td>
                                            </tr>
                                            <tr>
                                                <td class="armada-devider"><h4><li class="icon icon-help" title="help"> conditon</h4></td></li>
                                                <td class="armada-devider2"><h4>scanned</h4></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-4">
                        <div id="siteClose" class="nest">
                            <div class="title-alt">
                                <h6>
                                    <span class="fontawesome-truck"></span>&nbsp;information</h6>
                                <div class="titleClose">
                                    <a class="gone" href="#siteClose">
                                        <span class="entypo-cancel"></span>
                                    </a>
                                </div>
                                <div class="titleToggle">
                                    <a class="nav-toggle-alt" href="#site">
                                        <span class="entypo-up-open"></span>
                                    </a>
                                </div>
                            </div>
                            <div id="site" class="body-nest" style="min-height:296px;">
                                <div class="table-responsive">
                                    <table class="table">
                                        <thead>
                                        <tr>
                                            <th></th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td class="armada-devider"> <h4><li class="icon icon-feed" title="feed"> 端口：</h4></td></li>
                                            <td class="armada-devider2"><h4>监控情况</h4></td>
                                        </tr>
                                        <tr>
                                            <td class="armada-devider"><h4><li class="entypo-globe" title="globe"> 80</h4></td></li>
                                            <td class="armada-devider2"><h4>开启</h4></td>
                                        </tr>
                                        <tr>
                                            <td class="armada-devider"><h4><li class="entypo-globe" title="globe"> 135</h4></td></li>
                                            <td class="armada-devider2"><h4>开启</h4></td>
                                        </tr>
                                        <tr>
                                            <td class="armada-devider"><h4><li class="entypo-globe" title="globe"> 443</h4></td></li>
                                            <td class="armada-devider2"><h4>开启</h4></td>
                                        </tr>
                                        <tr>
                                            <td class="armada-devider"><h4><li class="entypo-globe" title="globe"> 3306</h4></td></li>
                                            <td class="armada-devider2"><h4>开启</h4></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>





            <div class="content-wrap">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="chart-wrap">
                                <!-- <div id="sparkline"></div> -->
                                <div id="placeholder" style="width:100%;height:1px;opacity: 0"></div>
                            <div id="maint" style="width: 500px;height:500px;position: relative;"></div>   <!--  服务器温度变化   -->

                            <script type="text/javascript">
                                // 基于准备好的dom，初始化echarts实例
                                var myChart6 = echarts.init(document.getElementById('maint'));

                                option6 = {
                                    title: {
                                        text: '服务器一周内温度变化',
                                    },
                                    tooltip: {
                                        trigger: 'axis'
                                    },
                                    legend: {
                                        data:['最高温度']
                                    },
                                    toolbox: {
                                        show: true,
                                        feature: {
                                            dataZoom: {
                                                yAxisIndex: 'none'
                                            },
                                            dataView: {readOnly: false},
                                            magicType: {type: ['line', 'bar']},
                                            restore: {},
                                        }
                                    },
                                    xAxis:  {
                                        type: 'category',
                                        boundaryGap: false,
                                        data: ['8:20','8:30','8:40','8:50','9:00','9:10','9:20','9:30']
                                    },
                                    yAxis: {
                                        type: 'value',
                                        axisLabel: {
                                            formatter: '{value} °C'
                                        }
                                    },
                                    series: [
                                        {
                                            name:'最高温度',
                                            type:'line',
                                            data:[21, 25, 27, 35, 26, 23, 20,25],
                                            markPoint: {
                                                data: [
                                                    {type: 'max', name: '最大值'},
                                                    {type: 'min', name: '最小值'}
                                                ]
                                            },
                                            markLine: {
                                                data: [
                                                    {type: 'average', name: '平均值'}
                                                ]
                                            }
                                        }
                                    ]
                                };

                          myChart6.setOption(option6);



                            </script>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="chart-wrap">
                            <div id="maincpu" style="width: 500px;height:500px;position: relative;"></div>   <!--  服务器温度变化   -->

                            <script type="text/javascript">
                                // 基于准备好的dom，初始化echarts实例
                                var myChart7 = echarts.init(document.getElementById('maincpu'));

                                option7 = {
                                    title: {
                                        text: '使用率',
                                    },
                                    tooltip: {
                                        trigger: 'axis'
                                    },
                                    legend: {
                                        data:['Cpu','Memory','Disk']
                                    },
                                    xAxis:  {
                                        type: 'category',
                                        boundaryGap: false,
                                        data: ['8:20','8:30','8:40','8:50','9:00','9:10','9:20','9:30']
                                    },
                                    yAxis: {
                                        type: 'value',
                                        axisLabel: {
                                            formatter: '{value} %'
                                        }
                                    },
                                    series: [
                                        {
                                            name:'Disk',
                                            type:'line',
                                            data:[21, 25, 27, 35, 26, 23, 20,25],
                                            itemStyle:{
                                                normal:{
                                                    lineStyle:{
                                                     color:'#669933'}
                                                }},
                                            markLine: {
                                                data: [
                                                    {type: 'average', name: '平均值'}
                                                ]
                                            }
                                        },
                                        {
                                            name:'Cpu',
                                            type:'line',
                                            data:[45,55,24,46,67,78,45,56],
                                            itemStyle:{
                                                normal:{
                                                    lineStyle:{
                                                        color:'#000000'}
                                                }},
                                            markLine: {
                                                data: [
                                                    {type: 'average', name: '平均值'}
                                                ]
                                            }
                                        },
                                        {
                                            name:'Memory',
                                            type:'line',
                                            data:[34,35,36,37,36,35,34,33],
                                            itemStyle:{
                                                normal:{
                                                    lineStyle:{
                                                        color:'#CCCCCC'}
                                                }},
                                            markLine: {
                                                data: [
                                                    {type: 'average', name: '平均值'}
                                                ]
                                            }
                                        }
                                    ]
                                };

                                myChart7.setOption(option7);



                            </script>
                        </div>
                    </div>
                </div>
                <!-- /END OF CONTENT -->



            </div>
        </div>
    </div>
    <!--  END OF PAPER WRAP -->

    <!-- RIGHT SLIDER CONTENT -->
    <div class="sb-slidebar sb-right">
        <div class="right-wrapper">
            <div class="row">
                <h3>
                    <span><i class="entypo-gauge"></i>&nbsp;&nbsp;MAIN WIDGET</span>
                </h3>
                <div class="col-lg-12">

                    <div class="widget-knob">
                        <span class="chart" style="position:relative" data-percent="86">
                            <span class="percent"></span>
                        </span>
                    </div>
                    <div class="widget-def">
                        <b>Distance traveled</b>
                        <br>
                        <i>86% to the check point</i>
                    </div>

                    <div class="widget-knob">
                        <span class="speed-car" style="position:relative" data-percent="60">
                            <span class="percent2"></span>
                        </span>
                    </div>
                    <div class="widget-def">
                        <b>The average speed</b>
                        <br>
                        <i>30KM/h avarage speed</i>
                    </div>


                    <div class="widget-knob">
                        <span class="overall" style="position:relative" data-percent="25">
                            <span class="percent3"></span>
                        </span>
                    </div>
                    <div class="widget-def">
                        <b>Overall result</b>
                        <br>
                        <i>30KM/h avarage Result</i>
                    </div>
                </div>
            </div>
        </div>

        <div style="margin-top:0;" class="right-wrapper">
            <div class="row">
                <h3>
                    <span><i class="entypo-chat"></i>&nbsp;&nbsp;CHAT</span>
                </h3>
                <div class="col-lg-12">
                    <span class="label label-warning label-chat">Online</span>
                    <ul class="chat">
                        <li>
                            <a href="#">
                                <span>
                                    <img alt="" class="img-chat img-circle" src="http://api.randomuser.me/portraits/thumb/men/20.jpg">
                                </span><b>Dave Junior</b>
                                <br><i>Last seen : 08:00 PM</i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>
                                    <img alt="" class="img-chat img-circle" src="http://api.randomuser.me/portraits/thumb/men/21.jpg">
                                </span><b>Kenneth Lucas</b>
                                <br><i>Last seen : 07:21 PM</i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>
                                    <img alt="" class="img-chat img-circle" src="http://api.randomuser.me/portraits/thumb/men/22.jpg">
                                </span><b>Heidi Perez</b>
                                <br><i>Last seen : 05:43 PM</i>
                            </a>
                        </li>


                    </ul>

                    <span class="label label-chat">Offline</span>
                    <ul class="chat">
                        <li>
                            <a href="#">
                                <span>
                                    <img alt="" class="img-chat img-offline img-circle" src="http://api.randomuser.me/portraits/thumb/men/23.jpg">
                                </span><b>Dave Junior</b>
                                <br><i>Last seen : 08:00 PM</i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>
                                    <img alt="" class="img-chat img-offline img-circle" src="http://api.randomuser.me/portraits/thumb/women/24.jpg">
                                </span><b>Kenneth Lucas</b>
                                <br><i>Last seen : 07:21 PM</i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>
                                    <img alt="" class="img-chat img-offline img-circle" src="http://api.randomuser.me/portraits/thumb/men/25.jpg">
                                </span><b>Heidi Perez</b>
                                <br><i>Last seen : 05:43 PM</i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>
                                    <img alt="" class="img-chat img-offline img-circle" src="http://api.randomuser.me/portraits/thumb/women/25.jpg">
                                </span><b>Kenneth Lucas</b>
                                <br><i>Last seen : 07:21 PM</i>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span>
                                    <img alt="" class="img-chat img-offline img-circle" src="http://api.randomuser.me/portraits/thumb/men/26.jpg">
                                </span><b>Heidi Perez</b>
                                <br><i>Last seen : 05:43 PM</i>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- END OF RIGHT SLIDER CONTENT-->
    <script type="text/javascript" src="assets/js/jquery.js"></script>
    <script src="assets/js/progress-bar/src/jquery.velocity.min.js"></script>
    <script src="assets/js/progress-bar/number-pb.js"></script>
    <script src="assets/js/progress-bar/progress-app.js"></script>



    <!-- MAIN EFFECT -->
    <script type="text/javascript" src="assets/js/preloader.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.js"></script>
    <script type="text/javascript" src="assets/js/app.js"></script>
    <script type="text/javascript" src="assets/js/load.js"></script>
    <script type="text/javascript" src="assets/js/main.js"></script>




    <!-- GAGE -->


    <script type="text/javascript" src="assets/js/chart/jquery.flot.js"></script>
    <script type="text/javascript" src="assets/js/chart/jquery.flot.resize.js"></script>
    <script type="text/javascript" src="assets/js/chart/realTime.js"></script>
    <script type="text/javascript" src="assets/js/speed/canvasgauge-coustom.js"></script>
    <script type="text/javascript" src="assets/js/countdown/jquery.countdown.js"></script>



    <script src="assets/js/jhere-custom.js"></script>

    <script>
    var gauge4 = new Gauge("canvas4", {
        'mode': 'needle',
        'range': {
            'min': 0,
            'max': 90
        }
    });
    gauge4.draw(Math.floor(Math.random() * 90));
    var run = setInterval(function() {
        gauge4.draw(Math.floor(Math.random() * 90));
    }, 3500);
    </script>


    <script type="text/javascript">
    /* Javascript
     *
     * See http://jhere.net/docs.html for full documentation
     */
    var a=31.2891;
    $(window).on('load', function() {
        $('#mapContainer').jHERE({
            center: [39.914555,116.423902],
            type: 'smart',
            zoom: 10
        }).jHERE('marker', [52.500556, 13.338889], {
            icon: 'assets/img/marker.png',
            anchor: {
                x: 12,
                y: 32
            },
            click: function() {
                alert('Hallo from Berlin!');
            }
        })
            .jHERE('route', [52.711, 13.011], [52.514, 13.453], {
                color: '#FFA200',
                marker: {
                    fill: '#86c440',
                    text: '#'
                }
            });
    });
    </script>
    <script type="text/javascript">
    var output, started, duration, desired;

    // Constants
    duration = 5000;
    desired = '50';

    // Initial setup
    output = $('#speed');
    started = new Date().getTime();

    // Animate!
    animationTimer = setInterval(function() {
        // If the value is what we want, stop animating
        // or if the duration has been exceeded, stop animating
        if (output.text().trim() === desired || new Date().getTime() - started > duration) {
            console.log('animating');
            // Generate a random string to use for the next animation step
            output.text('' + Math.floor(Math.random() * 60)

            );

        } else {
            console.log('animating');
            // Generate a random string to use for the next animation step
            output.text('' + Math.floor(Math.random() * 120)

            );
        }
    }, 5000);
    </script>
    <script type="text/javascript">
    $('#getting-started').countdown('2015/01/01', function(event) {
        $(this).html(event.strftime(

            '<span>%M</span>' + '<span class="start-min">:</span>' + '<span class="start-min">%S</span>'));
    });
    </script>
</body>

</html>
